<template>
    <view class="detail">
        <view class="detailTop">
            <dl style="width: 100%;height: 100%;display: flex;">
                <dt style="height: 100%;">
                    <image :src="userList.pic" style="width: 220rpx;height:220rpx;" mode=""></image>
                </dt>
                <dd style="margin-left: 20rpx;">
                    <view class="" >
                        <view class="">
                            昵称: <span>{{userList.realname}}</span>
                        </view>
                        <view class="">
                            电话: <span>{{userList.phone}}</span>
                        </view>
                        <view class="">
                            邮箱: <span>{{userList.email}}</span>
                        </view>
                    </view>
                    <view class="" style="margin-left: 60rpx;">
                        <u-button text="更换头像"></u-button>
                    </view>
                </dd>
            </dl>
        </view>
        <view class="edit" style="margin-top: 200rpx;">
            <u-button type="primary" text="编辑" @click="edit"></u-button>
        </view>
        <view class="back" style="margin-top: 150rpx;">
            <u-button type="error" text="退出" @click="back"></u-button>
        </view>
        <view>
            <u-modal :showCancelButton="true" @confirm="confirmHandler" @cancel="cancelHandler" :show="show">
                <view class="slot-content">
                    <view class="inps">
                        <view class="" style="display: flex;">
                            <span>昵称:</span><span><u--input placeholder="请输入内容" border="surround" v-model="value1"
                                    @change="change"></u--input></span>
                        </view>
                        <view class="" style="display: flex;">
                            <span>电话:</span><span><u--input placeholder="请输入内容" border="surround" v-model="value2"
                                    @change="change"></u--input></span>
                        </view>
                        <view class="" style="display: flex;">
                            <span>邮箱:</span><span><u--input placeholder="请输入内容" border="surround" v-model="value3"
                                    @change="change"></u--input></span>
                        </view>
                    </view>
                </view>
            </u-modal>
        </view>
    </view>
</template>


<script>
    export default {
        data() {
            return {
                show: false,
                value1: '',
                value2: '',
                value3: '',
                userList:{}
            }
        },
        methods: {
            back() {
                uni.clearStorageSync()
				uni.navigateBack()
            },
            edit() {
                this.show = true
            },
            confirmHandler() {
                
                if( this.value1=='' || this.value2=='' || this.value3=='' ){
                    uni.showToast({
                        title: '输入框不能为空',
                        duration: 2000,
                        icon: 'error'
                    });
                }
                else{
                    this.show = false
                    uni.request({
                        url:'http://10.31.67.9:8002/admin/updateuserinfo',
                        method:'POST',
                        data:{
                            username:this.value1,
                            phone:this.value2,
                            email:this.value3,
                            userinfo_name:this.userList.userinfo_name,
                        },
                        success: (res) => {
                            console.log(res);
                            this.userList.realname=this.value1
                            this.userList.phone=this.value2
                            this.userList.email=this.value3
                        }
                    })
                }
                
            },
            cancelHandler() {
                this.show = false
            },
            change(e) {
                console.log('change', e);
            },
            getData(){
                    uni.request({
                        url: 'http://10.31.67.24:8003/admin/usermessage',
                        method:'GET',
                        data: {
                            name: 'junge',
                        },
                        success: (res) => {
                            console.log(res.data);
                            this.userList=res.data
                        }
                    })
                
            }
        },
        onShow() {
            this.getData()
        }
    }
</script>
<style>
    .detail {
        width: 100vw;
        height: 80vh;
    }

    .detailTop {
        width: 100%;
        height: 25%;
        margin-top: 10px;
    }

    .detailTop dt {
        margin-left: 6px;
    }
    
    .inps view{
        margin-top: 20rpx;
    }
    
    .inps view span:nth-child(1){
        margin-top: 30rpx;
    }
</style>